<template>
    <div class="login-container">
      <!-- 顶部导航栏 -->
      <van-nav-bar
        left-arrow
        title="手机登录"
        @click-left="handleGoHome"
        :border="false"
      />
      
      <!-- 顶部标题区域 -->
      <div class="title-group">
        <van-icon name="gold-coin-o" class="icon" />
        <span class="title">鲨鱼记账</span>
      </div>
      <p class="desc">使用手机号密码登录</p>
  
      <!-- 表单区域 -->
      <van-form @submit="handleLogin">
        <van-cell-group inset>
          <van-field
            autocomplete="current-username"
            v-model="loginForm.mobile"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
            ]"
          />
          <van-field
            autocomplete="current-password"
            v-model="loginForm.password"
            :type="showPassword ? 'text' : 'password'"
            label="密码"
            placeholder="请输入密码"
            :rules="[
              { required: true, message: '请输入密码' },
              { pattern: /^[a-zA-Z0-9]{6,}$/, message: '密码至少6位，包含字母和数字' }
            ]"
            :right-icon="showPassword ? 'eye' : 'closed-eye'"
            @click-right-icon="showPassword = !showPassword"
          />
  
          <!-- 协议勾选框 -->
          <van-checkbox
            v-model="agreeProtocol"
            shape="round"
            class="protocol-checkbox"
            checked-color="#ffcc00"
          >
            已阅读并同意《<a href="javascript:;" class="protocol-link">用户协议</a>》和《<a href="javascript:;" class="protocol-link">隐私协议</a>》
          </van-checkbox>
        </van-cell-group>
  
        <!-- 登录按钮 -->
        <div class="btn-style">
          <van-button
            round
            block
            color="#ffcc00"
            text-color="#000"
            native-type="submit"
            :disabled="!agreeProtocol"
          >
            登录
          </van-button>
        </div>
  
        <!-- 底部链接 -->
        <div class="link-group">
          <RouterLink to="/findPassword" class="link">找回密码</RouterLink>
          <span class="separator">|</span>
          <RouterLink to="/register" class="link">注册账号</RouterLink>
        </div>
      </van-form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { showSuccessToast, showToast } from 'vant';
  import { useUserStore } from '@/stores/user';

  const loginForm = ref({
    mobile: '',
    password: ''
  });
  const agreeProtocol = ref(false); // 协议勾选状态
  const showPassword = ref(false); // 密码显示状态控制
  const router = useRouter();
  const route = useRoute();
  const userStore = useUserStore();
  
  //注册跳转
  function handleRegister(){
    router.push({name:'register'})
  }
  
  //找回密码
  function handleFindPassword(){
    router.push({name:'findPassword'})
  }
  
  const handleLogin = async () => {
    if (!loginForm.value.mobile || !loginForm.value.password) {
      showToast('请填写手机号和密码');
      return;
    }
    if (!agreeProtocol.value) {
      showToast('请同意用户协议和隐私协议');
      return;
    }
    try {
      // 执行登录（直接传递 mobile 字段，后端已支持）
      await userStore.login({
        mobile: loginForm.value.mobile,
        password: loginForm.value.password
      });
      await userStore.getLoginUser();
      
      showSuccessToast({
        message: '登录成功',
        duration: 1500,
      });
      
      // 获取重定向路径，如果有则跳转到重定向路径，否则跳转到明细页
      const redirect = route.query.redirect || '/detail';
      
      // 延迟跳转，让用户看到成功提示
      setTimeout(() => {
        router.push(redirect);
      }, 500);
    } catch (e) {
      showToast('登录失败: ' + e.message);
    }
  };

  // 返回首页
  const handleGoHome = () => {
    router.push({ name: 'home' });
  };
  </script>
  
<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  padding: 0 0 30px;
  background: linear-gradient(135deg, #fff 0%, #f7f8fa 100%);
  animation: fadeIn 0.5s ease-out;

  // 导航栏样式
  :deep(.van-nav-bar) {
    background: transparent;
    
    .van-nav-bar__title {
      font-size: 18px;
      font-weight: 500;
      color: #333;
    }
  }
  
  // 顶部标题样式
  .title-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 10px;
    animation: slideInLeft 0.6s ease-out;

    .icon {
      font-size: 28px;
      color: #000;
      background: linear-gradient(135deg, #FFCC00 0%, #FFD814 100%);
      border-radius: 8px;
      padding: 6px;
      margin-right: 12px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(255, 204, 0, 0.3);
    }

    .title {
      font-size: 26px;
      font-weight: 500;
      color: #333;
    }
  }

  // 描述文字样式
  .desc {
    color: #666;
    margin-bottom: 25px;
    font-size: 14px;
    text-align: center;
    animation: slideInLeft 0.7s ease-out;
  }

  // 表单区域动画
  :deep(.van-cell-group) {
    animation: slideInUp 0.6s ease-out;
  }

  // 协议勾选框样式
  .protocol-checkbox {
    margin: 16px;
    font-size: 12px;

    :deep(.van-checkbox__icon--round) {
      border-radius: 50%;
    }

    .protocol-link {
      color: #FFCC00;
      text-decoration: underline;
    }
  }

  // 按钮区域样式
  .btn-style {
    margin: 16px;
    animation: slideInUp 0.7s ease-out;

    :deep(.van-button) {
      height: 48px;
      font-size: 16px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
      transition: all 0.3s;

      &:active {
        transform: scale(0.98);
      }

      &:disabled {
        opacity: 0.5;
        box-shadow: none;
      }
    }
  }

  // 底部链接样式
  .link-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    animation: fadeIn 0.8s ease-out;

    .link {
      color: #666;
      font-size: 14px;
      transition: color 0.3s;

      &:active {
        color: #333;
      }
    }

    .separator {
      margin: 0 16px;
      color: #d8d8d8;
    }
  }
}

/* 动画定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>